React Interview Questions - Coding Interview 2026

Explore how React uses the virtual DOM to render efficiently by reconciling changes in JavaScript before updating the real DOM, and distinguish it from the unrelated shadow DOM.

Understand G6, a JavaScript syntax extension that lets you write HTML-like markup inside JavaScript files, used inside React to return markup without separate HTML files.

Learn why JSX uses className instead of class by avoiding reserved word collisions with JavaScript and ES6 class syntax, and how to write correct markup in React components.

Learn how functional components in React are simple functions returning markup, how to pass and destructure props, and how to provide a default value to prevent errors.

Explore how to create class components, pass props, and manage state in React. Compare class components to functional components and understand lifecycle hooks such as componentDidMount.

Dumb or presentational components are the same as smart or container components. Presentational components render data with no state, while container components manage state and business logic.

Render a list in React by mapping users and returning markup with a unique key for each item, preferably the id, not the index.

Explore how React.Fragment lets you render multiple elements without extra DOM wrappers, including the short <>...</> syntax, its limitations with keys, and when to prefer React.Fragment.

Explore conditional rendering in React using if conditions and returns, a ternary operator, and inline conditions; learn to split content into loading and main components for readable, maintainable code.

Explore how to apply styles in React using global CSS, inline styles, and isolated styling with styled-components, and cleanly toggle classes with the classnames library.

Explore React's parent–child communication via read-only props passed top-to-bottom, and using callback props for child events to inform the parent.

Demonstrates how useState creates local state in functional components with an initial value and a setter, using array destructuring and updating via the previous value.

Learn how the use effect hook manages side effects in React, running after render with dependency arrays controlling triggers, plus examples updating the document title and fetching data with axios.

Explain how useReducer brings Redux-like state management into React with a reducer and dispatch. See initial outside state, isLoading and data updated by actions like get articles start and success.

Learn how the useContext hook accesses a global theme from React context, with a theme provider, app wrapping, and a toggle function to switch light and dark themes.

Learn how the useRef hook lets you access dom elements and store mutable values between renders, and why using state for form inputs triggers renders rather than direct dom manipulation.

Study how the useMemo hook caches data between renderings to recalculate filtered users only when the search dependency changes, improving performance.

Demonstrates using useCallback to memoize a remove function in a user list and prevent unnecessary renders by wrapping the child list in React.memo with a dependency array.

Build a custom hook useFetch that fetches data with axios, returning response, loading, error, and a fetch trigger for the articles list, using useEffect and useCallback.

Learn to build a React custom hook useLocalStorage that synchronizes state with localStorage, handles SSR checks, and safely updates data with JSON parsing.

Learn how React.memo optimizes rendering, how to add a custom comparator, and why stable props like slides and width matter to prevent unwanted autoplay and unnecessary re-renders.

Discover two scalable ways to structure React projects: by type and by feature, including components, API, actions, reducers, and shared folders, with a focus on feature isolation and namespaces.

Learn to set up react router dom v6, use a layout with outlet, dynamic routes via useParams, query params with useSearchParams, 404 pages, and guarded routes with Navigate and localStorage.

Explore how React portals render components directly into the body to fix overflow issues with modals and tooltips, using createPortal and a reusable modal with isOpen, onClose, and children.

Explore how react lazy and suspense enable on-demand loading and code splitting, with a fallback during load and route-based chunk loading to keep initial bundles small.

Master typing React components with TypeScript by implementing props interfaces, children, conditional rendering, class components, and hooks such as useState and useContext for robust apps.

Explore how a higher order component wraps a component to provide loading, error, and data props, with data fetching via a HOC versus modern custom hooks.

Create a register form in React, starting simple and using the Formic library for complex validation and asynchronous submission. Manage state with useState and prevent default submit.

React strict mode renders the app twice in development to surface potential issues. It highlights side effects and deprecated patterns, explains console logs appear twice, and production remains unaffected.

Explore the business trade-offs of rewriting class components with hooks, weighing performance, project age, and library compatibility, and learn a pragmatic, partial migration strategy for modern React.

Learn how to force a component to re-render without calling setState, using a custom use force update hook or useReducer, while understanding when this signals architectural issues.

React fiber is the asynchronous internal engine that rewrote the reconciliation algorithm in React 16, enabling pausing, resuming, and prioritizing rendering for gradual changes.

Explain how server side rendering, client rendering, and server rendering differ in a React context, and how Next.js enables rendering on both server and client.

Explore how react query synchronizes api data with local components, leveraging caching, refreshing, and revalidation, using useQuery and useMutation to fetch and create users via json server.

Discover how Redux works in plain JavaScript by building a small store with a reducer, actions, and dispatch, then update state immutably and synchronize the UI with subscribe.

Learn how Redux works with React without toolkit, using React Redux bindings to create a store, combine reducers, and use useSelector and useDispatch to manage state with devtools.

Discover how redux toolkit offers a sugar layer over redux, using configureStore and createSlice to manage reducers and actions, with auto-generated users/addUser and built-in devtools.

Finish the course by practicing random interview questions to strengthen your interview readiness. Document every question you were asked after interviews to improve your preparedness for your next interview.